<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
</head>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            Vue模板语法有2大类
                1.插值语法：
                    功能：用于解析标签体内容；
                    写法：{{xxx}}：xxx是js表达式，且可以直接读取到data中的所有属性。
                2.指令语法：
                    功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）；
                    例子：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式；
                    备注：Vue中有很多的指令，且形式都是：v-????，以上只是以v-bind举个例子。
        -->
         <!-- 准备一个容器 -->
         <div id="root">
            <h1>插值语法</h1> 
            <h3>你好，{{name}}</h1>
            <hr/>
            <h1>指令语法</h1>
            <!-- 只有v-bind:href="xxx"，可以简写成:href="xxx" -->
            <a v-bind:href="school.url1">点我去{{school.url1Name}}主页</a>
            <a :href="school.url2">点我去{{school.url2Name}}主页</a>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

            
            new Vue({
                el:'#root', 
                data:{
                    name:'覃小宝',
                    //一个对象的形式存放数据，有多个属性值
                    school:{
                        url1Name:'百度',
                        url2Name:'CSDN',
                        url1:"www.baidu.com",
                        url2:"https://www.csdn.net/?spm=1001.2101.3001.4476"
                    }
                }
            })

        </script>

    </body>
</html>